<template>
	<view class="container">
		<custom-header title="文章详情"></custom-header>
		<!-- 标题 -->
		<view class="title-container">
			<text class="title">{{ title }}</text>
		</view>

		<!-- 图片 -->
		<image :src="imageSrc" class="article-image" mode="widthFix"></image>

		<!-- 内容 -->
		<view class="content-container">
			<rich-text :nodes="content"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				imageSrc: '',
				content: ''
			};
		},
		onLoad(options) {
			// 解析 URL 参数
			this.title = decodeURIComponent(options.title || '默认标题');
			this.imageSrc = decodeURIComponent(options.imageSrc || '');
			this.content = decodeURIComponent(options.content || '');
			
			console.log("imagesrc" + this.imageSrc);

			// 将纯文本内容转换为富文本节点
			this.content = this.convertToRichText(this.content);
		},
		methods: {
			convertToRichText(text) {
				// 将纯文本转换为富文本节点数组
				return [{
					type: 'text',
					text: text
				}];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.title-container {
		width: 100%;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.article-image {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.content-container {
		width: 100%;
		text-align: left;
		line-height: 1.5;
	}

	.content {
		font-size: 28rpx;
		color: #666;
	}
</style>